<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>订餐系统主界面</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
<link rel="stylesheet" type="text/css" href="css/bootstrap-theme.min.css"/>
<link rel="stylesheet" type="text/css" href="themes/bootstrap/easyui.css"/>
<link rel="stylesheet" type="text/css" href="themes/icon.css"/>

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.easyui.min.js"></script>
<script type="text/javascript" src="js/easyui-lang-zh_CN.js"></script>
</head>
<script type="text/javascript">
	$(function(){
		//树形菜单设置
		$("#showFuncs").tree({
			url:'showFuncsAction',
			animate:true,
			lines:true,
			onLoadSuccess:function(node,data){
				$("#showFuncs").tree('expandAll');
			},
			onClick: function(node){
				if(node.attributes.fpath){
					if($("#showTabs").tabs('exists',node.text)){
						$("#showTabs").tabs('select',node.text);
						var tab = $('#showTabs').tabs('getSelected');
						$("#showTabs").tabs('update', {
				            tab: tab,
				            options: {
				            	title: node.text,
							    closable:true,
							    content:"<iframe style='width:100%;height: 100%' src='"+node.attributes.fpath+"' frameborder='0'></iframe>"
				            }
				        });
					}else{
						$('#showTabs').tabs('add',{    
						    title: node.text,
						    closable:true,
						    content:"<iframe style='width:100%;height: 100%' src='"+node.attributes.fpath+"' frameborder='0'></iframe>"
						});
						var tab = $('#showTabs').tabs('getSelected');
						$("#showTabs").tabs('update', {
				            tab: tab,
				            options: {
				            	title: node.text,
							    closable:true,
							    content:"<iframe style='width:100%;height: 100%' src='"+node.attributes.fpath+"' frameborder='0'></iframe>"
				            }
				        });
					} 
				}
			}
		});
		//配置showTabs属性
		$('#showTabs').tabs({    
		     fit:true,
		border:false
		
		});
		
		//注销
		$("#cancelBtn").click(function(){
			$.ajax({
				type:'post',
				url:'${pageContext.request.contextPath}/quitAction',
				dataType:'json',
				success:function(data){
					if(data=="1"){
						window.parent.location="${pageContext.request.contextPath}/login.jsp";
					}else{
						$.messager.show({
							title:'提示',
							msg:'注销失败',
							timeout:2000,
							showType:'slide'
						});
					}
				}
			})
		})
	});
</script>

<body id="main" class="easyui-layout">
	 <div data-options="region:'north'" style="height:100px;" align="right">
	 	<h3 id="username">欢迎你${currentUserName}${currentRole}</h3>
	 	<button id="cancelBtn" type="button" class="btn btn-default" >注销</button>
	 </div>    
    <div data-options="region:'west',title:'功能区域'" style="width:220px;">
    	<!-- 菜单展示 -->
    	<ul id="showFuncs"></ul>
    </div>   
    <div data-options="region:'center'" style="padding:5px;background:#eee;">
    	<!-- 功能区域展示 -->
		<div id="showTabs" class="easyui-tabs" style="width:100%;height:100%">
			<div data-options="title:'首页'" align="center">
				  <img alt="" src="img/welcome.jpg" style="margin-top: 100px">
			</div>
			</div>
		</div>
    </div>
</body>
</html>